<template>
  <div class="main"> 
    <div class="container">
      <div class="topMsg">404</div>
      <button @click="goHome">返回首页</button>
    </div>
  </div>
  
</template>
 
<script setup lang="ts"> 
  import { useRouter } from 'vue-router';

  const router = useRouter()
  const goHome = () => {
    router.push('/home')
  }
</script>
 
<style lang="scss" scoped>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;

   .container {
      text-align: center;

      .topMsg {
        font-size: 5em;
        margin-bottom: 20px;
      }

      button {
        font-size: 20px;
      }
    }
  }
</style>
